<template>
    <div>
        <page-header title="欢迎使用华理师生交流平台！">
            <template #content>
                <div>
                    <div style="margin-bottom: 5px;">这是一款用于校园内<b style="color: #ff342c;">师生交流</b>的管理系统</div>
                    <div>软件工程大作业</div>
                </div>
            </template>
        </page-header>
        <page-main :style="note">
            <el-row type="flex" justify="center" align="top" :gutter="20">
                <img :src="indexbackground" style="height: auto; width: 25%; min-width: 300px; max-height: 250px; border-radius: 19px; opacity: 90%;">
            </el-row>
            <el-row :type="this.$store.state.settings.mode == 'mobile'?'':'flex'" justify="center" align="top" :gutter="20" style="text-align: center; padding: 30px;">
                <el-col :xs="24" :sm="24" :md="10" :lg="8" :xl="4" style="padding: 10px 30px 10px 30px;">
                    <div class="indextitle">A</div>
                    定向通知
                </el-col>
                <el-col :xs="24" :sm="24" :md="10" :lg="8" :xl="4" style="padding: 10px 30px 10px 30px;">
                    <div class="indextitle">B</div>
                    基于角色的讨论群
                </el-col>
                <el-col :xs="24" :sm="24" :md="10" :lg="8" :xl="4" style="padding: 10px 30px 10px 30px;">
                    <div class="indextitle">C</div>
                    论坛以及点对点讨论
                </el-col>
            </el-row>
        </page-main>
    </div>
</template>

<script>
import PageMain from '../components/PageMain/index'
export default {
    components: {PageMain},
    data() {
        return {
            indexbackground: require('../assets/images/indexbackground2.png'),
            note: {
                backgroundImage: 'url(' + require('../assets/images/indexmain.png') + ')',
                backgroundRepeat: 'no-repeat',
                backgroundSize: '100% 100%',
                marginTop: '5px'
            }
        }
    },
    methods: {

    }
}
</script>

<style lang="scss" scoped>
.fa-info {
    padding: 10px 0 0;
    text-align: center;
    h1 {
        margin: 10px auto 20px;
    }
}
.question {
    .answer {
        margin: 20px 0 0;
        padding-left: 20px;
        font-size: 14px;
        color: #aaa;
        li {
            margin-bottom: 10px;
            line-height: 1.5;
            &:last-child {
                margin-bottom: 0;
            }
        }
        span {
            color: #666;
            font-weight: bold;
        }
    }
}
.icon-box {
    padding: 20px;
    text-align: center;
    background-color: #fff;
    cursor: pointer;
    transition: 0.2s;
    &:hover {
        color: #fff;
    }
    &-1 {
        color: #ffc069;
        &:hover {
            background-color: #ffc069;
        }
    }
    &-2 {
        color: #b37feb;
        &:hover {
            background-color: #b37feb;
        }
    }
    &-3 {
        color: #95de64;
        &:hover {
            background-color: #95de64;
        }
    }
    &-4 {
        color: #ff85c0;
        &:hover {
            background-color: #ff85c0;
        }
    }
    &-5 {
        color: #ff9c6e;
        &:hover {
            background-color: #ff9c6e;
        }
    }
    &-6 {
        color: #282c34;
        &:hover {
            background-color: #282c34;
        }
    }
    i {
        font-size: 24px;
    }
    .title {
        margin-top: 5px;
        font-size: 14px;
    }
}
.indextitle {
    font-size: 30px;
    color: #409eff;
}
.indexmain-mobile {
    padding: 10px 10px 10px 10px;
}
.indexmain-pc {
    padding: 10px 30px 10px 30px;
}

</style>
